import React, { useState } from 'react'
import { Table, Image, Avatar, Space, Button } from 'antd'
import { useEffect } from 'react'
import { getUserlist } from './../../api/users'
import TelShow from './../../components/TelShow'
import TimeShow from './../../components/TimeShow'
function UserList() {
  const [ userlist, setUserlist ] = useState([])

  useEffect(() => {
    async function fetchData () {
      const res = await getUserlist()
      setUserlist(res.data.data)
    }
    fetchData()
  }, [])

  const columns = [
    {
      title: '序号',
      render: (text, record, index) => <span>{ index + 1 }</span>
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      render: (text, record, index) => {
        return (
          <Avatar src={<Image src={text} width={60} height={60}/>}/>
        )
      }
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
      width: '200px',
      render: (text) => {
        return <TelShow tel={text} />
      }
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname'
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email'
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text, record, index) => {
        return text === 1 ? '男' : text === 0 ? '女' : '暂未设置'
      }
    },
    {
      title: '生日',
      dataIndex: 'birthday',
      key: 'birthday'
    },
    {
      title: '注册时间',
      dataIndex: 'regtime',
      key: 'regtime',
      render: (text) => <TimeShow time={ text } />
    },
    {
      title: '操作',
      render: (text, record, index) => {
        return (
          <Space>
            <Button>冻结</Button>
          </Space>
        )
      }
    },
  ]
  return (
    <>
    <Table
      dataSource = { userlist }
      columns = { columns }
      rowKey = "userid"
    />
    </>
  )
}

export default UserList
